<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad,
		onUnload,
		onHide
	} from '@dcloudio/uni-app';
	import {
		getCiHuiLiangApi,
		tijiaociHuiApi
	} from '/api/request.js';
	const props = defineProps({});
	const platform = ref({});
	const list = ref(null);
	const clearTimers = () => {
		// 暂停
		uni.$emit('pause')
		if (timer.value) {
			clearInterval(timer.value);
			timer.value = null;
		}
		if (timerss.value) {
			clearTimeout(timerss.value);
			timerss.value = null;
		}
		if (del) {
			clearTimeout(del);
		}
	};

	onShow(() => {
		platform.value = uni.getStorageSync('platform');
	});
	onUnload(() => {
		clearTimers()
		uni.$emit('pause')
	});
	onHide(() => {
		clearTimers()
		uni.$emit('pause')
	});
	const id = ref('')
	onLoad(async (e) => {
		id.value = e.id
		let res = await getCiHuiLiangApi({
			id: e.id
		});
		list.value = res.data
	});
	const goback = () => {
		uni.navigateBack();
	};
	const show = ref(true)
	let del
	del = setTimeout(() => {
		show.value = false
		startTime()
		clearTimeout(del)
	}, 1200)
	const indexs = ref(0)
	const count = ref(10)
	const timer = ref(null)
	const select = ref(null)
	const all = ref(new Set())
	const startTime = () => {
		uni.$emit('playAudio', list.value[indexs.value].voice_file)
		if (timerss.value) {
			clearTimeout(timerss.value)
			timerss.value = null
		}
		timer.value = setInterval(() => {
			if (count.value <= 0) {
				all.value.add({
					id: list.value[indexs.value].id,
					answer: 'F'
				})
				consecutiveErrors.value++;
				totalErrors.value++;
				select.value = list.value[indexs.value].corrects
				if (consecutiveErrors.value >= 5 || totalErrors.value >= 7) {
					if (timer.value) {
						clearInterval(timer.value)
						timer.value = null
					}
					end()
					return;
				}
				clearInterval(timer.value)
				timer.value = null
				timerss.value = setTimeout(() => {
					clear()
					clearTimeout(timerss.value)
					timerss.value = null
				}, 800)
				return
			}
			count.value--
		}, 1000)
	}
	const clear = () => {
		if (indexs.value == list.value.length - 1) {
			if (timer.value) {
				clearInterval(timer.value)
				timer.value = null
			}
			end()
		}
		indexs.value++
		count.value = 10
		select.value = null
		oright.value = null
		if (timer.value) {
			clearInterval(timer.value)
			timer.value = null
		}
		startTime()
	}
	const consecutiveErrors = ref(0);
	const totalErrors = ref(0);
	const timerss = ref(null)
	const oright = ref('')
	const addDaAn = (item) => {
		if (select.value || show.value) {
			return;
		}
		if (timerss.value) {
			clearInterval(timerss.value)
			timerss.value = null
		}
		select.value = item;
		const isCorrect = item == list.value[indexs.value].corrects;
		all.value.add({
			id: list.value[indexs.value].id,
			answer: item,
		});
		if (isCorrect) {
			consecutiveErrors.value = 0;
		} else {
			oright.value = list.value[indexs.value].corrects;
			consecutiveErrors.value++;
			totalErrors.value++;
		}
		if (consecutiveErrors.value >= 5 || totalErrors.value >= 7) {
			clearTimers()
			end()
			return;
		}

		timerss.value = setTimeout(() => {
			clear();
			clearTimeout(timerss.value)
			timerss.value = null;
		}, 800);
	};
	const center = ref(null)
	const hao = ref('')
	const end = async () => {
		clearTimers()
		uni.showLoading({
			mask: true
		})
		let res = await tijiaociHuiApi({
			exam_id: id.value,
			answers: JSON.stringify(Array.from(all.value))
		})
		console.log(res);
		uni.hideLoading()
		center.value.open('center')
		hao.value = res.data.exam_id
	}
	const showPage = () => {
		center.value.close()
		uni.redirectTo({
			url: '/pages/grammar/result?id=' + hao.value + '&haola=' + id.value
		})
	}
</script>

<template>
	<view class="wrap" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
			<view class="title"> 词汇量测试 </view>
			<image style="opacity: 0" class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
		</view>
		<view class="body" v-if="list && list.length ">
			<view class="title">
				{{list[indexs].word}}
			</view>
			<view class="label" v-show="show">
				保留时间超过10秒，建议选择不认识
			</view>
			<view class="label" v-show="!show">
				{{count}}s
			</view>
			<view class="item uni-row" v-for="(item,index) in list[indexs].options" :key="index"
				@click="addDaAn(item.prefix)"
				:class="(select&&select==item.prefix&&select==list[indexs].corrects||oright&&oright==item.prefix&&oright==list[indexs].corrects)?'active':(select&&select==item.prefix&&select!=list[indexs].corrects)?'error':''">
				{{item.content}}
			</view>
		</view>
		<view class="nothing" v-if="list && list.length < 1">
			<image src="/static/img/nothing.png" class="img"></image>
			<view class="label"> 哎呀，这里什么内容都没有 </view>
		</view>
	</view>
	<uni-popup ref="center" :mask-click="false">
		<view class="wai">
			<image src="/static/img/cihuiliang/body2.png" class="limiande"></image>
			<view class="title">
				完成测试
			</view>
			<view class="label">
				已生成测试报告,请前往查看
			</view>
			<view class="btn uni-row" @click="showPage">
				查看报告
			</view>
		</view>
	</uni-popup>
</template>

<style scoped lang="less">
	.wai {
		padding: 28rpx;
		width: 694rpx;
		margin: 0 auto;
		text-align: center;
		border-radius: 20rpx;
		background-color: #fff;

		.limiande {
			width: 500rpx;
			height: 600rpx;
		}

		.title {
			margin: 0rpx 0 20rpx;
			font-size: 32rpx;
			font-weight: 500;
		}

		.label {
			font-size: 28rpx;
			margin-bottom: 30rpx;
		}

		.btn {
			justify-content: center;
			font-size: 32rpx;
			color: #FFFFFF;
			height: 88rpx;
			background: #9561F3;
			border-radius: 16rpx;
		}
	}

	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.body {
			padding: 80rpx 28rpx;
			text-align: center;

			.title {
				font-weight: 500;
				font-size: 72rpx;
				color: #333333;
				line-height: 100rpx;
			}

			.label {
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #B3B3B3;
				line-height: 34rpx;
				margin-bottom: 80rpx;
			}

			.item {
				justify-content: center;
				margin-bottom: 40rpx;
				height: 88rpx;
				background: #eee;
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #333333;

				&.active {
					border: 2rpx solid #5BD145;
					background-color: #E6FBE2;
				}

				&.error {
					background: #F9E4E0;
					border: 2rpx solid #EF4828;
				}
			}
		}
	}
</style>